import BaseView from '../baseView.js';

export default class MoviesAdd extends BaseView {
    render() {
        $('#Content').html(`
            <div>
                <div style="margin: 30px 10px 0 20px ">
                    <span class="layui-breadcrumb" style="visibility:visible;">
                    <a>猫眼后台管理系统</a>
                    <a>电影管理</a>
                    <a>添加电影信息</a>
                    </span>
                    <hr/>
                </div>
                <div>
                    <form class="layui-form" style='height:2000px'>
                        <div class="layui-form-item">
                        <label class="layui-form-label">电影名字:</label>
                        <div class="layui-input-block">
                        <input type="text" id="cname" required   placeholder="请输入电影名称"  class="layui-input">
                        </div>
                        </div>
                        <div class="layui-form-item">
                        <label class="layui-form-label">英文名字:</label>
                        <div class="layui-input-block">
                        <input type="text" id="ename" required   placeholder="请输入英文"  class="layui-input">
                        </div>
                        </div>
                        <div class="layui-form-item">
                        <label class="layui-form-label">类型:</label>
                        <div class="layui-input-block">
                        <input type="text" id="types" required   placeholder="请输入电影类型"  class="layui-input">
                        </div>
                        </div>
                        <div class="layui-form-item">
                        <label class="layui-form-label">首映地区:</label>
                        <div class="layui-input-block">
                        <input type="text" id="area" required   placeholder="请输入首映地区"  class="layui-input">
                        </div>
                        </div>
                        
                        <div class="layui-form-item">
                        <label class="layui-form-label">放映时长:</label>
                        <div class="layui-input-block">
                        <input type="text" id="time" required   placeholder="请输入放映时长"  class="layui-input">
                        </div>
                        </div>
                        <div class="layui-form-item">
                        <label class="layui-form-label">首映日期:</label>
                        <div class="layui-input-block">
                        <input type="text" id="update" required   placeholder="请输入首映日期"  class="layui-input">
                        </div>
                        </div>
                        <div class="layui-form-item">
                        <label class="layui-form-label">电影评分:</label>
                        <div class="layui-input-block">
                        <input type="text" id="score" required   placeholder="请输入电影评分"  class="layui-input">
                        </div>
                        </div>
                        <div class="layui-form-item">
                        <label class="layui-form-label">票房:</label>
                        <div class="layui-input-block">
                        <input type="text" id="count" required   placeholder="请输入电影票房"  class="layui-input">
                        </div>
                        </div>

                        <div class="layui-form-item">
                        <label class="layui-form-label">简介:</label>
                        <div class="layui-input-block">
                        <input type="text" id="intro" required   placeholder="请输入电影简介"  class="layui-input">
                        </div>
                        </div>
                       
                        <div class="layui-form-item">
                        <label class="layui-form-label">是否经典:</label>
                        <div class="layui-input-block">
                        <input type="text" id="isClassic" required   placeholder="请输入是或否"  class="layui-input">
                        </div>
                        </div>
                        <div class="layui-form-item">
                        <label class="layui-form-label">导演:</label>
                        <div class="layui-input-block">
                        <input type="text" id="director" required   placeholder="请输入导演"  class="layui-input">
                        </div>
                        </div>
                        <div class="layui-form-item">
                        <label class="layui-form-label">演员:</label>
                        <div class="layui-input-block">
                        <input type="text" id="actor" required   placeholder="请输入演员"  class="layui-input">
                        </div>
                        </div>

                        <div class="layui-form-item">
                        <label class="layui-form-label">影集:</label>
                        <div class="layui-input-block">
                        <input type="text" id="images" required   placeholder="请输入影集"  class="layui-input">
                        </div>
                        </div>

                        <!-- 上传海报 -->
                        <div class="layui-upload" style="margin-left: 112px;margin-top: 10px;margin-bottom: 30px;">
                        <button type="button" class="layui-btn" id="upload_test"><i class="layui-icon">&#xe67c;</i>上传海报</button>
                        <div class="layui-upload-list" style="width: 100px;height:100px;border: 1px solid black;">
                            <img class="layui-upload-img" id="demo1" style="width: 100px;height:100px;">
                            <p id="demoText"></p>
                        </div>
                        </div>

 
                        <!-- 上传影集多张 -->
                        <!--<div class="layui-upload" style="margin-left: 112px;margin-top: 10px;margin-bottom: 30px;">
                        <button type="button" class="layui-btn" id="test2">上传影集</button> 
                        
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                        预览图：
                        <div class="layui-upload-list" id="demo2"></div>
                        </blockquote>
                        </div> -->
                    

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                            <button type='button' id='addstudentBtn' class="layui-btn" lay-submit lay-filter="formDemo">添加</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            <button type="button" id='goToStudentListBtn' class="layui-btn layui-btn-warm">返回</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <script>
            layui.use('form', function(){
            var form = layui.form;
            //获得表单
            myform = form
            //重新渲染表单
            // form.render();
            });
            </script>
        `);
    }

    handle() {
        $("#addStudent").html(`
        <script>
         layui.use('form', function(){
         var form = layui.form;
         //重新渲染表单
         form.render();
         });
         </script>
          `)

        //绑定添加事件
        // $("#addstudentBtn").click(() => {
        //     $.ajax({
        //         type: "post",
        //         url: "/movies/add",
        //         data: {
        //             "cname": $("#cname").val(),
        //             "ename": $("#ename").val(),
        //             "types": $("#types").val(),
        //             "area": $("#area").val(),
        //             "poster": $("#poster").val(),
        //             "time": $("#time").val(),
        //             "upDate": $("#update").val(),
        //             "score": $("#score").val(),
        //             "count": $("#count").val(),
        //             "intro": $("#intro").val(),
        //             "isClassic": $("#isClassic").val(),
        //             "director": $("#director").val(),
        //             "actor": $("#actor").val(),
        //             "images": $("#images").val(),
        //         },
        //         dataType: "json",
        //         success: (data) => {
        //             //console.log(data)
        //             if (data.code == 1) {
        //                 alert(data.msg);
        //                 window.location.hash = "#/main/showmovies";
        //             } else {
        //                 alert(data.msg);
        //             }
        //         }
        //     })
        // });
        //返回
        $("#goToStudentListBtn").click(() => {
            window.location.hash = "#/main/showmovies";
        })

        layui.use(['upload', 'element', 'layer'], function () {
            var $ = layui.jquery
                , upload = layui.upload
                , element = layui.element
                , layer = layui.layer;

            //常规使用 - 普通图片上传
            var uploadInst = upload.render({
                elem: '#upload_test'
                , url: '/movies/add' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                , auto: false   //不自动上传
                , bindAction: '#addstudentBtn'    //绑定一个按钮来触发上传
                // 传入的其他的参数（除了文件以外的参数）
                , data: {
                    cname: () => $("#cname").val(),
                    ename: () => $("#ename").val(),
                    types: () => $("#types").val(),
                    area: () => $("#area").val(),
                    time: () => $("#time").val(),
                    upDate: () => $("#update").val(),
                    score: () => $("#score").val(),
                    count: () => $("#count").val(),
                    intro: () => $("#intro").val(),
                    isClassic: () => $("#isClassic").val(),
                    director: () => $("#director").val(),
                    actor: () => $("#actor").val(),
                    images: () => $("#images").val(),
                }
                , choose: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });

                    element.progress('demo', '100%'); //进度条复位
                    layer.msg('上传中', { icon: 16, time: 1000 });
                }
                , done: function (res) {
                    console.log(res);
                    //如果上传失败
                    if (res.code) {
                        layer.msg(res.msg);
                        window.location.hash = "#/main/showmovies";
                    } else {
                        layer.msg('上传失败');
                        $('#demoText').html(''); //置空上传失败的状态
                    }
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
            //多图片上传
            // upload.render({
            //     elem: '#test2'
            //     , url: '/movies/collection' //此处配置你自己的上传接口即可
            //     , multiple: true
            //     ,auto:false
            //     ,bindAction:'#addstudentBtn'
            //     , choose: function (obj) {
            //         //预读本地文件示例，不支持ie8
            //         obj.preview(function (index, file, result) {
            //             $('#demo2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" style="width:100px;height:100px">')
            //             // console.log(obj.total); //得到总文件数
            //             // console.log(obj.successful); //请求成功的文件数
            //             // console.log(obj.aborted); //请求失败的文件数
            //         });
            //     }
            //     , done: function (res) {
            //         console.log(res);
            //         //如果上传失败
            //         if (res.code) {
            //             layer.msg(res.msg);
            //             window.location.hash = "#/main/showall";
            //         } else {
            //             layer.msg('上传失败');
            //             $('#demoText').html(''); //置空上传失败的状态
            //         }
            //     }
            // });
        });
    }
}